@mixin toolTip() {
    position: absolute;
    z-index: 100;
    background: transparent;
    font-size: 10*2upx;
    min-width: 74*2upx;
    .toolTip-content {
        line-height: 1;

        text {
            font-size: 12*2upx;
            line-height: 1;
        }
    }
}

/* 向左 */
.toolTip-left {
    @include toolTip();
    top: 50%;
    right: 0;
    transform: translate(100%, -50%);
    padding-left: 1em;

    .toolTip-content {
        position: relative;
        padding: 8*2upx 10*2upx;
        border-radius: 4*2upx;
        background: var(--white);
        box-shadow: 0 5px 1em 0 rgba(0, 0, 0, 0.21);
    }

    .toolTip-arrow {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateX(-74%) translateY(-50%) rotate(90deg);
        width: 2em;
        height: 1em;
        overflow: hidden;

        &::after {
            content: " ";
            position: absolute;
            width: 1em;
            height: 1em;
            background: white;
            transform: translateX(-50%) translateY(-50%) rotate(45deg);
            top: 0;
            left: 50%;
            box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.21);
        }
    }
}

/* 向右 */
.toolTip-right {
    @include toolTip();
    top: 50%;
    left: 0;
    transform: translate(-100%, -50%);
    padding-right: 1em;

    .toolTip-content {
        position: relative;
        padding: 8*2upx 10*2upx;
        border-radius: 4*2upx;
        background: var(--white);
        box-shadow: 0 5px 1em 0 rgba(0, 0, 0, 0.21);
    }

    .toolTip-arrow {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateX(74%) translateY(-50%) rotate(-90deg);
        width: 2em;
        height: 1em;
        overflow: hidden;

        &::after {
            content: " ";
            position: absolute;
            width: 1em;
            height: 1em;
            background: white;
            transform: translateX(-50%) translateY(-50%) rotate(45deg);
            top: 0;
            left: 50%;
            box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.21);
        }
    }
}

/* 向下 */
.toolTip-bottom {
    @include toolTip();
    top: 50%;
    right: 0;
    transform: translate(100%, -50%);
    padding-left: 1em;

    &__content {
        position: relative;
        padding: 8*2upx 10*2upx;
        border-radius: 4*2upx;
        background: var(--white);
        box-shadow: 0 5px 1em 0 rgba(0, 0, 0, 0.21);
    }

    &__arrow {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        overflow: hidden;
        width: 2em;
        height: 1em;

        &::after {
            content: " ";
            position: absolute;
            width: 1em;
            height: 1em;
            background: white;
            transform: translateX(-50%) translateY(-50%) rotate(45deg);
            top: 0;
            left: 50%;
            box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.21);
        }
    }
}
